<template>
	<view class="main-cont box box-tb box-pack-start">
		<view class="box box-tb box-align-center box-pack-center user">
			<u-avatar :src="user.icon" mode="circle" size="125"></u-avatar>
			<view class="user-name mt10">
				{{user.name}}
			</view>
		</view>
		<view class="chart">
			<view class="info">
				<view class="box box-pack-between box-align-center title" @click="show = !show">
					<view style="color: #626BF1;font-size: 28rpx;">
						详细数据
					</view>
					<u-icon name="arrow-right" v-if="show == false"></u-icon>
					<u-icon name="arrow-down" v-if="show == true"></u-icon>
				</view>
				<view class="data box box-align-center" v-if="show == true">
					<view class="list box box-tb box-align-center box-pack-center" v-for="(item,index) in infoArr"
						:key="index">
						<view class="value">
							{{item.value}}
						</view>
						<view class="tips">
							{{item.title}}
						</view>
					</view>
				</view>
			</view>
			<view class="charts-box">
				<qiun-data-charts type="radar" :chartData="chartData" background="#fff" :ontouch="false" />
			</view>
		</view>
<!-- 		<view class="btn">
			<u-button type="warning">分享</u-button>
		</view> -->
	</view>
</template>

<script>
	export default {
		data() {
			return {
				user: uni.getStorageSync('user'),
				dclass: uni.getStorageSync('dclass'),
				chartData: {
					categories: [],
					series: [],
				},
				style: {
					height: "0"
				},
				show: false,
				infoArr: []
			}
		},
		onLoad() {
			this.stuXqbg()
		},
		methods: {
			stuXqbg(){
				let opts = {
					url: '/dstudent/stuXqbg',
					method: 'post'
				};
				let params = {
					userid:this.user.id,
					schoolid:this.user.schoolId,
					classid:this.dclass.id
				};
				this.$api.post(opts, params).then(res => {
					//console.log(res);
					if(res.code == 0){
						this.chartData.categories = ["学习时长","实践分","课程分","活跃度","被赞数"];
						this.chartData.series.push({"name": "学情报告","data": res.data.data});
						
						//console.log(this.chartData);
						this.infoArr = [{
							title: "学习时长",
							value: res.data.sc+"分钟"
						},
						{
							title: "实践分数",
							value: res.data.sjScore !=null?res.data.sjScore:0+"分"
						},
						{
							title: "课程分数",
							value: res.data.kcScore !=null?res.data.kcScore:0+"分"
						},
						{
							title: "活跃度",
							value: res.data.hyd !=null?res.data.hyd:0
						},
						{
							title: "被赞数",
							value: res.data.bzs !=null?res.data.bzs:0
						}]
					}
					
				})
			},
			clickHide() {
				this.show = !this.show
			},
			clickShow() {
				this.show = !this.show
			}
		}
	}
</script>

<style scoped lang="scss">
	/* 请根据需求修改图表容器尺寸，如果父容器没有高度图表则会显示异常 */
	.charts-box {
		width: 100%;
		height: 300px;
	}

	.main-cont {
		width: 100%;
		height: 100%;
		background: linear-gradient(180deg, #565293, #312F63);
	}

	.chart {
		// position: relative;
		// padding-top: 112rpx;
		margin: 14rpx auto;
		width: 722rpx;
		height: 780rpx;
		background: #FFFFFF;
		border-radius: 18rpx;
	}

	.user {
		height: 243rpx;
	}

	.user-name {
		font-size: 32rpx;
		color: #fff;
	}

	.info {
		position: relative;
		width: 100%;
		z-index: 100000;
		background-color: #fff;
		border-radius: 18rpx;

		.title {
			padding: 0 48rpx;
			width: 100%;
			height: 110rpx;
			font-size: 28rpx;
			color: #626BF1;
			border-bottom: 2rpx solid #F0F1F8;
		}
	}

	.list {
		width: 33.3%;

		.value {
			font-size: 30rpx;
		}

		.tips {
			font-size: 24rpx;
			color: #5F6572;
		}

		&:nth-child(1) {
			.value {
				color: #00CB7B;
			}
		}

		&:nth-child(2) {
			.value {
				color: #7F84E4;
			}
		}

		&:nth-child(3) {
			.value {
				color: #F97762;
			}
		}

		&:nth-child(4) {
			.value {
				color: #FF9B4F;
			}
		}

		&:nth-child(5) {
			.value {
				color: #5893F7;
			}
		}
	}

	.data {
		position: absolute;
		top: 112rpx;
		width: 100%;
		height: 274rpx;
		flex-wrap: wrap;
		background: #FFFFFF;
		box-shadow: 0px 7px 32px 0px rgba(96, 101, 112, 0.08);

	}
	
	.btn {
		margin: 40rpx auto 0;
		width: 280rpx;
	}
</style>
